<template>
    <div class="breadcrumb">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><a href="/awarditem">奖项列表</a></el-breadcrumb-item>
            <el-breadcrumb-item>
                {{ this.$route.params.id > 0 ? '编辑奖项' : '新增奖项' }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card>
        <el-form ref="validateForm" :model="form" label-width="80px" class="edit-box">
            <el-form-item label="奖项名称" prop="name" :rules="[
                { required: true, message: '请输入奖项名称', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
            ]">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="奖项数量" prop="amount" :rules="[
                { required: true, message: '请输入奖项数量', trigger: 'blur' },
                { type: 'number', message: '奖项数量必须为数字值', trigger: 'blur' }
            ]">
                <el-input v-model.number="form.amount"></el-input>
            </el-form-item>
            <el-form-item label="奖项轮次" prop="round" :rules="[
                { required: true, message: '请输入奖品金额', trigger: 'blur' },
                { type: 'number', message: '奖品金额必须为数字值', trigger: 'blur' }
            ]">
                <el-input v-model.number="form.round"></el-input>
            </el-form-item>
            <el-form-item label="选择奖品" prop="award_id" :rules="[
                { required: true, message: '请选择奖品', trigger: 'blur' },
            ]">
                <el-select v-model="form.award_id" filterable placeholder="请选择奖品">
                    <el-option v-for="item in awards" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible = true">{{ this.$route.params.id > 0 ? '立即修改' :
                    '立即新增' }}</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-dialog v-model="dialogVisible" title="提示" width="500">
        <span>你确定执行此操作吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    name: 'AwardEdit',
    components: {

    },

    data() {
        return {
            form: {
                name: '',
                amount: '',
                round: '',
                award_id: ''
            },
            dialogVisible: false,
            awards: []
        }
    },

    methods: {
        onSubmit() {
            this.$refs['validateForm'].validate((valid) => {
                if (valid) {
                    this.$http.post(`/admin/awarditem/edit/${this.$route.params.id}`, {
                        name: this.form.name,
                        amount: this.form.amount,
                        round: this.form.round,
                        award_id: this.form.award_id
                    }).then(() => {
                        this.dialogVisible = false
                        this.$router.push({ path: '/awarditem' })
                        ElMessage({
                            message: this.$route.params.id > 0 ? '奖品编辑成功' : '奖品新增成功',
                            type: 'success',
                            plain: true,
                            duration: 1500
                        })
                    }).catch(() => {

                    })
                } else {
                    return false;
                }
            });
        },
        getDetail() {
            this.$http.get(`/admin/awarditem/${this.$route.params.id}`).then((res) => {
                this.form.name = res.data.name
                this.form.amount = res.data.amount
                this.form.round = res.data.round
                this.form.award_id = res.data.award_id
            }).catch(() => {

            })
        },
        searchAward() {
            this.$http.get(`/admin/award/search`).then((res) => {
                const temp = []

                if (res.data) {
                    res.data.forEach(item => {
                        temp.push({
                            value: item.id,
                            label: item.name
                        })
                    });
                }

                this.awards = temp
            }).catch(() => {

            })
        }
    },

    mounted() {
        if (this.$route.params.id > 0) {
            this.getDetail()
        }

        this.searchAward()
    }

}

</script>

<style scoped>
.breadcrumb {
    height: 35px;
}

.edit-box {
    margin-top: 20px;
}
</style>